<template>
  <a-config-provider :locale="locale">
    <div class="main">
      <a-layout class="layoutWrap">
        <Menus></Menus>
        <a-layout>
          <a-layout-header class="header">
            <div class="headerTitle">
              <span v-if="isBack">
                <a-tooltip title="返回上页">
                  <a-icon type="double-left" style="margin-right: 12px" class="hovers" @click="handBack" />
                </a-tooltip>
              </span>
              {{ headerTitle }}
            </div>
            <div class="extraRight">
              <a-space size="middle">
                <template v-if="isBete">
                  <a-tooltip title="物流日照大屏">
                    <a-button class="defaultButton" @click="handClickScreen(event, 'logisticsrz')"
                      style="background-color: #00e0ff;color: #000000;">
                      <a-space>
                        <ZSIcon icon="icon-fanhui1" :styles="{ color: '#00000099', fontSize: '16px' }">
                        </ZSIcon>
                        物流日照大屏
                      </a-space>
                    </a-button>
                  </a-tooltip>
                </template>
                <!-- 可视化大屏 -->
                <template>
                  <a-tooltip title="可视化大屏">
                    <a-button class="defaultButton" @click="handClickScreen"
                      style="background-color: #00e0ff;color: #000000;">
                      <a-space>
                        <ZSIcon icon="icon-fanhui1" :styles="{ color: '#00000099', fontSize: '16px' }">
                        </ZSIcon>
                        可视化大屏
                      </a-space>
                    </a-button>
                  </a-tooltip>
                </template>
                <!-- 全屏 -->
                <a-button class="defaultButton" @click="changeScreen">
                  <a-icon class="trigger" style="background-color: #ffffff"
                    :type="!isScreen ? 'fullscreen' : 'fullscreen-exit'" />
                </a-button>
                <a-space align="center"
                  v-if="userInfo && typeof userInfo == 'object' && Object.keys(userInfo).length > 0">
                  <!-- <a-avatar :src="userInfo.avatar" v-if="userInfo.avatar" /> -->
                  <a-icon type="user" style="font-size: 16px" />
                  <span style="font-size: 16px" v-if="userInfo.userName">{{
                    userInfo.userName
                  }}</span>
                </a-space>
              </a-space>
            </div>
          </a-layout-header>
          <a-layout-content class="contentWrap">
            <div class="content">
              <router-view />
            </div>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import Menus from "./components/Menus.vue";
import { onResizeChang } from "@/common/js/common";
import { routeAuthority } from "./js/js";
import ZSIcon from '@/components/ZSIcon/ZSIcon.vue';
export default {
  name: "manage",
  components: {
    Menus,
    ZSIcon,
  },
  data() {
    return {
      locale: zhCN,
      isScreen: false,
      headInfo: "",
      headerTitle: "",
      userInfo: {},
      isBack: false,
      // 是否本地测试
      isBete: false,
    };
  },
  methods: {
    // 跳转到大屏
    handClickScreen(e, path) {
      let strUrl = path ? path : "/screen"
      this.$router.replace({ path: strUrl });
    },
    changeScreen() {
      let isBoolean;
      if (!document.fullscreenElement) {
        isBoolean = true;
        this.enterFullScreen();
      } else {
        isBoolean = false;
        this.exitFullScreen();
      }
      this.isScreen = isBoolean;
    },
    // 全屏
    enterFullScreen() {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        /* Firefox */
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        /* Chrome, Safari & Opera */
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        /* IE/Edge */
        element.msRequestFullscreen();
      }
    },
    // 收起全屏
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        /* IE/Edge */
        document.msExitFullscreen();
      }
    },
    // 页面修改时
    onResizeChange() {
      let isBoolean;
      if (!document.fullscreenElement) {
        isBoolean = false;
      } else {
        isBoolean = true;
      }
      this.isScreen = isBoolean;
    },
    onChangeHeadInfo(e, isBack) {
      this.headerTitle = e;
      if (typeof isBack == "boolean") {
        this.isBack = isBack;
      } else {
        this.isBack = false;
      }
    },
    // 获取用户信息
    userInfoData() {
      this.getAxios(this.$getinlineuser, {})
        .then((res) => {
          // 将获取的用户信息存入缓存
          if (res.data) {
            let dataObj = res.data;
            this.userInfo = dataObj;
          }
        })
        .catch((err) => { })
        .finally(() => { });
    },
    handBack() {
      this.$bus.$emit("appChangeActive");
    },
    beteLocation() {
      // location.host.includes('10.161.106') || 
      if (location.host.includes('localhost:80')) {
        this.isBete = true;
      } else {
        this.isBete = false;
      }
    }
  },
  mounted() {
    this.userInfoData();
    this.beteLocation();
  },
  created() {
    // 监听屏幕改变的话就调用
    onResizeChang("start", this.onResizeChange);
    this.$bus.$on("headInfo", this.onChangeHeadInfo);
  },
  computed: {},
  // 销毁
  beforeDestroy() {
    onResizeChang("end");
    this.$bus.$off("headInfo");
  },
  watch: {
    // 监听路由对象
    $route: {
      handler: function (to, from) {
        routeAuthority(to, this);
      },
      // 设置为深度监听
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;

  // &::before {
  //     content: "";
  //     /* 伪元素需要内容，即使它是空的 */
  //     position: absolute;
  //     top: 0;
  //     right: 0;
  //     bottom: 0;
  //     left: 0;
  //     background: url(~@/assets/images/manage/back.png);
  //     background-size: cover;
  //     /* 或其他你需要的背景大小 */
  //     opacity: 0.3;
  //     /* 设置透明度 */
  //     z-index: -1;
  //     /* 确保伪元素在内容之下 */
  // }

  .layoutWrap {
    width: 100%;
    height: 100%;
    // 透明背景
    // background-color: transparent;

    .header {
      height: 60px;
      line-height: 60px;
      border-left: 1px solid #cdcdcd;
      border-bottom: 1px solid #cdcdcd;
      box-sizing: content-box;
      background-color: var(--backColor);
      // 透明背景
      // background-color: transparent;
      padding: 0px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .extraRight {}
    }

    .contentWrap {
      padding: 10px;

      .content {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.trigger:hover {
  box-shadow: 0px 0px 6px 1px #cdcdcd;
}

.headerTitle {
  font-size: 20px;
  font-weight: 800;
}
</style>
